<template>
  <div>
    <TopNav :title="$route.meta.title"></TopNav>
    <div class="main">
      <!-- 地址 -->
      <header class="address_wrap">
        <div class="name">
          <span>{{ address.name }}</span>
          <span>{{ address.tel }}</span>
        </div>
        <div class="address">{{ address.address }}</div>
        <div class="icon">
          <van-icon name="arrow" size=".5rem" @click="ok2" />
        </div>
      </header>
      <!-- 地址 -->

      <div class="goods_group">
        <!-- 商品列表 -->
        <van-swipe-cell v-for="item in list" :key="item.cartItemId">
          <div class="goods_item">
            <div class="goods_img">
              <img width="100px" :src="item.goodsCoverImg" alt="" />
            </div>
            <div class="goods_desc">
              <p class="goods_title">
                <span>{{ item.goodsName }}</span>
                <span>x{{ item.goodsCount }}</span>
              </p>
              <div class="goods_btn">
                <p>￥{{ item.sellingPrice }}</p>
              </div>
            </div>
          </div>
        </van-swipe-cell>
        <!-- 商品列表 -->
      </div>

      <van-cell-group class="bottom">
        <van-cell title="商品金额" :value="allPrice" value-class="price" />
        <van-button type="primary" @click="save" size="large"
          >生成订单</van-button
        >
      </van-cell-group>
    </div>
    <!-- 支付按钮 -->
<PayTarBar v-show="show" 
:show="show"
:orderNum="orderNum"
 @getShow="getSon"></PayTarBar>
    <!-- 支付按钮 -->
  </div>
</template>
<script>
import {
  getAddressList,
  defaultGoods,
  saveOrder,

} from "@/api/index";
import TopNav from "@/components/topNav.vue";
import PayTarBar from "@/components/payTarBar.vue";
export default {
  name: "createOrder",
  data() {
    return {
      address: {}, 
      list: [],
      show: false,
      orderNum: "",
    };
  },
  methods: {
    //生成订单
    save() {
      let cartItemIds = localStorage.getItem("cartItemIds").split(",");
      for (let i = 0; i < cartItemIds.length; i++) {
        cartItemIds[i] = parseInt(cartItemIds[i]);
      }
      //保存订单
      saveOrder({
        addressId: this.address.id,
        cartItemIds,
      }).then((data) => {
       if (data.data!=null) {
        this.orderNum = data.data;
       };
        this.show = true;
      });
    },
    //改变地址
    ok2() {
      this.$router.push("/addressList");
    },
     //选择支付方式

    getSon(val){
      this.show=val
    }
  },
  components: { TopNav, PayTarBar },
  created() {
    //获取该订单的地址
    getAddressList().then((data) => {
      let a = data.data.find((item) => item.defaultFlag == 1);
      this.address = {
        id: a.addressId,
        name: a.userName,
        tel: a.userPhone,
        address: a.cityName + a.provinceName + a.regionName + a.detailAddress,
        isDefault: a.defaultFlag,
      };
    });
    //获取该订单的商品
    defaultGoods(localStorage.getItem("cartItemIds")).then((data) => {
      this.list = data.data;
    });
  },
  computed: {
    allPrice() {
      let totalPrice = 0;
      for (let i = 0; i < this.list.length; i++) {
        totalPrice += this.list[i].sellingPrice;
      }
      return "￥" + totalPrice;
    },
  },
};
</script>
<style scoped lang="less">
.main {
  position: absolute;
  top: 0rem;
  left: 0;
  overflow-y: auto;
  bottom: 0;
  right: 0;
  .address_wrap {
    margin-bottom: 0.53333rem;
    background: #fff;
    position: relative;
    margin-top: 1.17333rem;
    font-size: 0.37333rem;
    padding: 0.4rem;
    color: #222333;
    .name {
      margin: 0.26667rem 0;
    }
    .icon {
      position: absolute;
      right: 0.4rem;
      top: 45%;
    }
  }
  .goods_group {
    margin: 0 0 5rem 0;
    padding-left: 0.26667rem;
    .goods_item {
      display: flex;
      align-items: center;
      .goods_desc {
        width: 100%;
        padding: 0.53333rem;
        font-size: 0.16rem;
        .goods_title {
          display: flex;
          justify-content: space-between;
        }
        .goods_btn {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0rem;
    left: 0;
    width: 100%;
    .price {
      color: red;
      font-size: 0.8rem;
    }
  }
}
</style>